<template>
    <div class="forgetPage">
        <div>账号验证</div>
        <span class="sub-title">验证账号并输入新密码</span>
        <div class="card">
            <div class="row-Input">
                <div class="left-Input">
                    <input-box
                        :value="formData.telephone"
                        :placeholder="'请输入手机号'"
                        :on-input="handleInput"
                        :label="'手机号'"
                        :params-value="'telephone'"
                        :width="100"
                    ></input-box>
                </div>
                <CountdownButton
                    :phone-number="formData.telephone"
                    :edit-text="'修改'"
                ></CountdownButton>
            </div>
            <div class="row-Input" style="border-bottom: 0">
                <div class="left-Input">
                    <input-box
                        :value="formData.validCode"
                        :placeholder="'请输入验证码'"
                        :on-input="handleInput"
                        :label="'验证码'"
                        :params-value="'validCode'"
                    ></input-box>
                </div>
            </div>
        </div>
        <div class="card2">
            <div class="row-Input">
                <div class="left-Input">
                    <input-box
                        :value="formData.password"
                        :placeholder="'请输入密码需包含数字字母，长度8位以上'"
                        :on-input="handleInput"
                        :label="'新密码'"
                        :params-value="'password'"
                    ></input-box>
                </div>
            </div>
            <div class="row-Input" style="border-bottom: 0">
                <div class="left-Input">
                    <input-box
                        :value="formData.confirmPassword"
                        :placeholder="'确认新密码'"
                        :on-input="handleInput"
                        :label="'确认密码'"
                        :params-value="'confirmPassword'"
                    ></input-box>
                </div>
            </div>
        </div>
        <ButtoBox
            :name="'完成'"
            :height="'38px'"
            :line-height="'38px'"
            :margin-top="'10px'"
            :border-radius="'18px'"
            :click="handleSbmit"
        ></ButtoBox>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import InputBox from '@/components/inputBox/index.vue'

import CountdownButton from '@/components/countdownButton/index.vue'

import ButtoBox from '@/components/button-box/index.vue'
import { changePassword } from '@/service/login'

interface ITFormData {
    telephone?: string
    validCode?: string
    password?: string
    confirmPassword: string
}

const formData = ref<ITFormData | any>({
    telephone: '',
    validCode: '',
    password: '',
    confirmPassword: ''
})

const handleInput = (e: any, key: string) => {
    const { value } = e.detail
    formData.value[key] = value
}
const handleSbmit = async () => {
    const formValue = formData.value
    if (!formValue.validCode) {
        uni.showToast({
            icon: 'none',
            title: '请输入验证码'
        })
        return
    }
    const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
    if (!regex.test(formValue.password)) {
        uni.showToast({
            icon: 'none',
            title: '请输入正确的密码格式'
        })
        return
    }
    if (formValue.password !== formValue.confirmPassword) {
        uni.showToast({
            icon: 'none',
            title: '密码不一致，请重新输入'
        })
        return
    }

    const result = await changePassword(formValue)
    if (result.code === '200') {
        uni.reLaunch({
            url: '/pages/login/index'
        })
    }
}
</script>
<style scoped lang="scss">
.forgetPage {
    padding: 20px;
    min-height: 100vh;
    background: #f5f2f2cc;
    box-sizing: border-box;
    .sub-title {
        color: #a6a4a4;
        font-size: 12px;
    }
    .card {
        margin-top: 10px;
        background: #fff;
        padding: 10px 15px 10px 15px;
        width: 100%;
        box-sizing: border-box;
        // background-color: red;
        border-radius: 8px;
        .row-Input {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            border-bottom: 1px solid #f1eeee;
            width: 100%;
            .leftInput {
                height: 40px;
            }
        }
    }
    .card2 {
        margin-top: 10px;
        background: #fff;
        padding: 10px 15px 10px 15px;
        // width: 100%;
        // box-sizing: border-box;
        // background-color: red;
        // border-radius: 8px;
        .row-Input {
            // display: flex;
            // align-items: center;
            // // justify-content: space-between;
            border-bottom: 1px solid #f1eeee;
            // width: 100%;
            .leftInput {
                // height: 40px;
            }
        }
    }
}
</style>
